<template>
    <div>
        <el-col align="right">
            <el-button type="success" round @click="openPermissionsUI(null)">新增权限</el-button>
        </el-col>

        <el-card>

            <el-tree :data="permissionsList" node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
                :props="defaultProps" :render-content="renderContent">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="openPermissionsUI(node.data.id)">
                            修改
                        </el-button>
                        <el-button type="text" size="mini" @click="deletePermissions(node.data)">
                            删除
                        </el-button>

                    </span>
                </span>
            </el-tree>
        </el-card>

        <!-- 新增修改权限弹窗 -->
        <el-dialog @close="clearForm" :title="title" id="addRole" :visible.sync="dialogFormVisible">
            <el-form :model="permissionsForm" ref="permissionsFormRef">
                <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="permissionsForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-select v-model="permissionsForm.pid" filterable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePermissions">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增修改权限弹窗 -->
    </div>
</template>
  
<script>
import permissionsApi from '@/api/permissions.js'

export default {
    name: "permissionsIndex",
    data() {
        return {

            options: [],
            value: '',
            title: '',
            permissionsList: [],
            dialogFormVisible: false,
            dialogRoleFormVisible: false,

            permissionsForm: {},

            defaultProps: {
                children: 'children',
                label: 'name'
            },

        }
    },
    methods: {

        openPermissionsUI(id) {
            if (id == null) {
                this.title = "新增角色";
            } else {
                this.title = "修改权限";
                permissionsApi.getPermissionsById(id).then(response => {
                    this.permissionsForm = response.data.info;
                });
            }

            permissionsApi.getPermissionsArray().then(response => {
                console.log(response.data);
                this.options = response.data.list;
            });


            this.dialogFormVisible = true;
        },
        savePermissions() {
            //触发表单验证
            this.$refs.permissionsFormRef.validate((valid) => {
                console.log(this.permissionsForm);
                if (valid) {
                    permissionsApi.savePermissions(this.permissionsForm).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        this.dialogFormVisible = false
                        this.getPermissionsList();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        deletePermissions(data) {
            this.$confirm(`此操作将删除 ${data.name}角色, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                permissionsApi.deletePermissions(data.id).then(response => {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                    this.dialogFormVisible = false
                    this.getPermissionsList();
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        getPermissionsList() {
            permissionsApi.getPermissionsList(this.searchModel).then(response => {
                console.log(response.data);
                this.permissionsList = response.data.permissionsList;
            })
        },

        clearForm() {
            this.permissionsForm = {};
        }
    },


    created() {
        this.getPermissionsList();
    },
}
</script>
  
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>